<template>
    <p class="viewTitle">
        <span>浏览量排名</span>
    <div>
        <span :class="index == 'year' ? 'active' : ''" @click="changeIndex('year')">年</span><span
            :class="index == 'month' ? 'active' : ''" @click="changeIndex('month')">月</span>
    </div>
    </p>
    <div class="rank">
        <div class="list">
            <div class="list-item" v-for="(item, index) in dataList.slice(0,10)" :key="index">
                <p :class="(queryParams.page - 1) * queryParams.rows + index + 1<4?['list-item-index','indexBg']:['list-item-index','']"><span>{{ (queryParams.page - 1) * queryParams.rows + index + 1 }}</span></p>
                <p class="list-item-content">
                    <span :title="item.modules" class="list-item-title">{{ item.modules }}</span>
                    <span class="list-item-date">{{ item.pageView }}</span>
                </p>
            </div>
        </div>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows" size="small"
            @pagination="getList" />
    </div>
</template>

<script setup>
import { getViewRank } from '@/api/index/accessRanking.js'
const index = ref('month');
const dataList = ref([]);
const total = ref(0);
const queryParams = ref({
    page:1,
    rows:10,
    unit:index.value
})

const changeIndex = (type) => {
    dataList.value = [];
    if (type == index.value) return;
    index.value = type;
    queryParams.value.page = 1;
    getList();
}

const getList = () => {
    getViewRank({...queryParams.value}).then(res => {
        dataList.value = res.data.rows ? res.data.rows : [];
        total.value = res.data.total;
    })
}

onMounted(() => {
    getList();
})
</script>

<style scoped lang="scss">
.viewTitle {
    margin: 0;
    padding: 0 30px;
    height: 70px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1px solid #f3f3f3;

    >span {
        font-size: 20px;
        font-weight: bold;
    }

    div {
        span {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            font-size: 14px;
            margin-left: 10px;
            text-align: center;
            background: #ccc;
            border-radius: 4px;
            color: #fff;
            cursor: pointer;
        }

        .active {
            background-color: #107ce5;
        }
    }
}

.rank {
    height: 500px;
    padding: 15px 30px;

    .list {
        width: 100%;
        margin-bottom: 20px;

        .list-item {
            display: flex;
            height: 40px;
            display: flex;
            align-items: center;
            flex-direction: row;
            &-index {
                padding: 0;
                margin: 0;
                display: inline-block;
                width: 25px;
                height: 25px;
                line-height: 25px;
                text-align: center;
                margin-right: 10px;
                // background-color: #46FFFF;
                background: url('@/assets/icon/rank2.png');
                background-size: 100% 100%;
                color: #fff;
                font-size: 14px;
                font-weight: bold;
                span{
                    display: inline-block;
                    position: relative;
                    top: -2px;
                    left: -2px;
                }
            }
            .indexBg{
                background: url('@/assets/icon/rank1.png')!important;
                background-size: 100% 100%!important;
            }
            &-content {
                padding: 0;
                margin: 0;
                flex: 1;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background-size: 100% 100%;
                font-size: 14px;
                color: #333;
                box-sizing: border-box;
            }

            &-title {
                width: 80%;
                display: inline-block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 14px;
                font-weight: 400;
            }

            // &-title:hover {
            //     width: 80%;
            //     display: inline-block;
            //     white-space: nowrap;
            //     overflow: hidden;
            //     text-overflow: ellipsis;
            //     color: #107ce5;
            //     font-size: 16px;
            //     font-weight: bold;
            // }

            &-date {
                width: 20%;
                display: inline-block;
                text-align: right;
            }

        }
    }
}
:deep(.pagination-container){
    .el-pagination__sizes{
        display: none;
    }
    .el-pagination__jump{
        display: none;
    }
}
</style>